<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/jQuery.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <style>
        #badge {

        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row mt-5">
            <!-- 新增按钮-->
            <button id="addCom"
                    class="btn btn-outline-primary mx-3 col-sm-1 btn-sm"
                    data-toggle="modal" data-target="#addComModal">
                新增商品</button>

            <!-- 模糊搜索-->
            <form action="/commodity" class="input-group col-sm-4 float-right">
                <input type="text" name="name" class="form-control" placeholder="商品名称" aria-label="Recipient's username" aria-describedby="button-addon">
                <div class="input-group-append">
                    <input type="submit" value="搜索" class="btn btn-outline-secondary" id="button-addon">
                </div>
            </form>
        </div>

        <!--  增加商品模态框-->
        <div class="modal fade" id="addComModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">添加商品</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="/commodity/add" method="post" id="form" class="px-4">
                            <div class="form-group row">
                                <label for="name" class="col-sm-3 col-form-label">商品名称</label>
                                <div class="col-sm-9">
                                    <input name="name" type="text" class="form-control" id="name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="type" class="col-sm-3 col-form-label">商品类别</label>
                                <div class="col-sm-9">
                                    <input name="type" type="text" class="form-control" id="type">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="importPrice" class="col-sm-3 col-form-label">进口价格</label>
                                <div class="col-sm-9">
                                    <input name="importPrice" type="number" step="0.1" class="form-control" id="importPrice">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="exportPrice" class="col-sm-3 col-form-label">销售价格</label>
                                <div class="col-sm-9">
                                    <input name="exportPrice" type="number" step="0.1" class="form-control" id="exportPrice">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="number" class="col-sm-3 col-form-label">库存数量</label>
                                <div class="col-sm-9">
                                    <input name="number" type="number" class="form-control" id="number">
                                </div>
                            </div>
                            <div class="text-right">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <input type="submit" id="submit" class="btn btn-primary"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品列表-->
        <table class="table text-center table-striped table-bordered table-hover mt-2">
            <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">商品名称</th>
                <th scope="col">商品类别</th>
                <th scope="col">进口价格(元)</th>
                <th scope="col">销售价格(元)</th>
                <th scope="col">库存数量</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="commodity:${commodities.list}">
                <th th:text="${(commodities.pageNum - 1) * 5 + commodityStat.index + 1}" scope="row">12</th>
                <td th:text="${commodity.name}">Mark</td>
                <td th:text="${commodity.type}">Otto</td>
                <td th:text="${commodity.importPrice}">@mdo</td>
                <td th:text="${commodity.exportPrice}">@mdo</td>
                <td th:text="${commodity.number}">@mdo</td>
                <td>
                    <a th:onclick="'javascript: deleteOne(\''+${commodity.id}+'\')'"><button id="delete" class="btn btn-danger btn-sm">删除</button></a>
                    <a th:href="@{/commodity/edit(id=${commodity.id})}">
                        <button
                            id="edit"
                            class="btn btn-success btn-sm"
                            data-toggle="modal"
                            data-target="#editComModal">
                        编辑</button>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>

        <!-- 分页导航-->
        <nav class="float-right" aria-label="Page navigation example">
            <ul class="pagination">
                <li th:if="${commodities.pageNum} == 1" class="page-item disabled">
                    <a class="page-link" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li th:if="${commodities.pageNum} != 1" class="page-item">
                    <a class="page-link"
                       th:href="@{/commodity(pageNum=${commodities.pageNum - 1})}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li th:if="${commodities.pageNum} != 1" class="page-item"><a th:text="${commodities.pageNum - 1}" class="page-link" th:href="@{/commodity(pageNum=${commodities.pageNum - 1})}">3</a></li>
                <li class="page-item"><a th:text="${commodities.pageNum}" class="page-link" href="#">3</a></li>
                <li th:if="${commodities.pageNum} != ${commodities.pages}" class="page-item"><a th:text="${commodities.pageNum + 1}" class="page-link" th:href="@{/commodity(pageNum=${commodities.pageNum + 1})}">3</a></li>
                <li th:if="${commodities.pageNum} != ${commodities.pages}" class="page-item">
                    <a class="page-link"
                       th:href="@{/commodity(pageNum=${commodities.pageNum + 1})}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li th:if="${commodities.pageNum} == ${commodities.pages}" class="page-item disabled">
                    <a class="page-link" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 徽标-->
        <img id="badge" src="https://img.shields.io/badge/hubu-%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B1902-blue"/>
        <a href="https://portrait.gitee.com/rogerskelamen/ssm-data-handle"><img src="https://img.shields.io/badge/-gitee-red?logo=Gitee"/></a>

    </div>

</body>

    <script>
        function deleteOne(id) {
            if (confirm('确定删除此商品?')) {
                window.location =  '/commodity/delete?id=' + id;
            }
        }
    </script>

</html>